<template>
  <view class="container">
    <view class="data-list">
      <view class="data-item" v-for="(item, index) in list" :key="index">
        <view class="appointment">
          <text class="region">等级名称：</text>
          <text class="detail">{{ item.name }}</text>
        </view>
        <view class="appointment">
          <text class="region">等级权重：</text>
          <text class="detail">{{ item.weight }}</text>
        </view>
        <view class="appointment">
          <text class="region">升级条件：</text>
          <text class="detail">消费满{{ item.upgrade.expend_money }}元</text>
        </view>
		<view class="line"></view>
		<view class="item-option">
		  <view class="_left">
		  </view>
		  <view class="_right">
		    <view class="events">
		      <view class="event-item" @click="handleEdit(item.grade_id, item.name, item.weight, item.upgrade.expend_money)">
		        <text class="iconfont icon-edit"></text>
		        <text class="title">编辑</text>
		      </view>
		      <view class="event-item" @click="handleRemove(item.grade_id)">
		        <text class="iconfont icon-delete"></text>
		        <text class="title">删除</text>
		      </view>
		    </view>
		  </view>
		</view>
      </view>
    </view>
    <empty v-if="!list.length" :isLoading="isLoading" tips="亲，暂无数据" />
	<!-- 底部操作按钮 -->
	<view class="footer-fixed">
	  <view class="btn-wrapper">
	    <view class="btn-item btn-item-main" @click="handleAdd()">添加会员等级</view>
	  </view>
	</view>
  </view>
</template>

<script>
  import * as GradeApi from '@/apishop/grade'
  import Empty from '@/components/empty'

  export default {
    components: {
      Empty
    },
    data() {
      return {
        //当前页面参数
        options: {},
        // 正在加载
        isLoading: true,
        // 收货地址列表
        list: [],
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 获取页面数据
      this.getPageData()
    },

    methods: {

      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        app.getDataList()
      },

      // 获取数据列表
      getDataList() {
        const app = this
        return new Promise((resolve, reject) => {
          GradeApi.list()
            .then(result => {
              app.list = result.data.list.data
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 列表排序把默认收货地址放到最前
      onReorder() {
        const app = this
        app.list()
      },

      /**
       * 添加
       * @param {Object} gradeId
       */
      handleAdd() {
	    this.$navTo('pages/shop/grade/add')
      },
	  
	  /**
	   * 编辑
	   * @param {Object} gradeId
	   */
	  handleEdit(gradeId, name, weight, expend_money) {
		  console.log(gradeId, name, weight)
	    this.$navTo('pages/shop/grade/edit', { gradeId, name, weight, expend_money })
	  },
	  /**
	   * 删除
	   * @param {Object} gradeId
	   */
	  handleRemove(gradeId) {
	    const app = this
	    uni.showModal({
	      title: "提示",
	      content: "您确定要删除吗?",
	      success({ confirm }) {
	        confirm && GradeApi.remove(gradeId)
	    	.then(result => {
	    		app.getDataList()
	    	})
	      }
	    });
	  }
	  
    }
  }
</script>

<style lang="scss" scoped>
  .data-list {
    padding-bottom: 120rpx;
  }

  // 项目内容
  .data-item {
    margin: 20rpx auto 20rpx auto;
    padding: 30rpx 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  .contacts {
    font-size: 30rpx;
    margin-bottom: 16rpx;

    .name {
      margin-right: 16rpx;
    }
  }

  .appointment {
    font-size: 28rpx;

    .region {
      margin-right: 10rpx;
    }
  }

  .line {
    margin: 20rpx 0;
    border-bottom: 1rpx solid #f3f3f3;
  }

  .item-option {
    display: flex;
    justify-content: space-between;
    height: 48rpx;

    // 操作
    .events {
      display: flex;
      align-items: center;
      line-height: 48rpx;

      .event-item {
        font-size: 28rpx;
        margin-right: 22rpx;
        color: #4c4c4c;

        &:last-child {
          margin-right: 0;
        }

        .title {
          margin-left: 8rpx;
        }
      }
    }

  }


  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    height: 96rpx;
    z-index: 11;
    box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
    background: #fff;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);
    }

  }
</style>
